<template>
	<view class="page">
		<q-navbar title="详情" :isBack="true"></q-navbar>
		<view class="content">
			<view class="">
				标题：{{form.title}}
			</view>
			<view>
				发布人：{{form.userName}}
			</view>
			<view class="image">
				<view>图像：</view>
				<view>
					<q-image :src="form.avatarImg" :width="300" :height="300" radius="25" />
				</view>
			</view>
			<view class="" v-if="isShow">
				文章类型：{{typeList.find(v=>v.value==form.typeId).label}}
			</view>
			<view class="">
				文章内容：<view class="intro" v-html="form.content"></view>
			</view>
		</view>
		<q-button v-if="!isShow" name="预约" @submit="handleClick" />
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				form: {},
				typeList: [],
				id: '',
				isShow: false
			}
		},
		watch: {},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.findType()
				this.getDetail()
			}
			if (options.type) {
				this.isShow = false
				this.getDetail(1)
			} else {
				this.isShow = true
			}
		},
		onShow() {},
		methods: {
			handleClick() {
				this.router.push({
					path: `/pages/applyfor/detail/detail?id=${this.form.id}&time=${this.form.callNumTime}`,
					time: 0
				})
			},
			async findType() {
				let res = await this.$api.getTypeList('sys_call_article')
				console.log('号源类型', res);
				res.data.forEach(v => {
					v.label = v.dictLabel
					v.value = v.dictValue
				})
				this.typeList = res.data
			},
			async getDetail(e) {
				let res;
				if (e) {
					res = await this.$api.findSource(this.id)
				} else {
					res = await this.$api.getArticle(this.id)
				}
				if (res.data) {
					this.form = res.data
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding: 40rpx;

		.content {
			.image {
				display: flex;
				align-items: flex-start;
			}
		}

		.content>view {
			margin-bottom: 30rpx;
		}

		.intro {
			border: 2rpx solid #eaeaea;
			padding: 20rpx 0;
			font-weight: 700;
			border-radius: 25rpx;
			min-height: 200rpx;
			text-indent: 2em;
		}
	}
</style>